<!--
 * @Descripttion: 预警管理
 * @version:
 * @Author: wl
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-07-29 11:37:35
-->
<template>
  <div class="warns">
    <div class="perWarns">
      <el-divider>
        <h3>人员类型预警</h3>
      </el-divider>
      <div class="perWarns-content">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>类型名称</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="addWrans"
              :disabled="!hasPerm('news:warn:add')"
            >
              新增类型
            </el-button>
          </div>
          <div class="text item tablebox">
            <el-table
              :data="typelist"
              style="width: 100%"
              stripe
              highlight-current-row
              ref="table"
              height="100%"
              accordion
            >
              <el-table-column prop="name" label="类型名称">
                <template slot-scope="scope">
                  <div>
                    <span v-if="scope.row._id">{{ scope.row.name }}</span>
                    <el-input v-else v-model="scope.row.name" clearable></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    v-if="!scope.row._id"
                    type="text"
                    plain
                    :disabled="!hasPerm('news:warn:edit')"
                    @click="establish(scope.row)"
                  >
                    提交
                  </el-button>
                  <el-button
                    size="small"
                    type="text"
                    v-show="hasPerm('news:warn:remove')"
                    @click="handleDelete(scope.row)"
                  >
                    删除
                  </el-button>
                  <!-- <el-button
                    type="text"
                    size="small"
                    :disabled="!hasPerm('news:warn:remove')"
                    @click.native.prevent="deleWarn(scope.$index, typelist)"
                  >删除</el-button>-->
                </template>
              </el-table-column>
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div :key="props.row._id">
                    <div class="addperWarn">
                      <el-button type="text" @click="addperType(props.row)" :disabled="!hasPerm('news:warn:addp')">
                        新增人员类型
                      </el-button>
                    </div>
                    <ul class="expendOut">
                      <li class="expandsOne">
                        <span class="typeName typeTitle">名称</span>
                        <span class="typeTitle">描述</span>
                        <span class="typeTitle typeOpear">操作</span>
                      </li>
                      <li class="expandsOne" v-for="(item, index) in props.row.dictionaries" :key="index">
                        <span class="typeName">{{ item.name }}</span>
                        <span>{{ item.describe }}</span>
                        <span class="typeOpear">
                          <el-button type="text" icon="el-icon-edit" plain @click="eidType(item)"></el-button>
                          <el-button type="text" icon="el-icon-delete" plain @click="deleType(item)"></el-button>
                        </span>
                      </li>
                    </ul>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- 新增人员类型 -->
            <el-dialog
              :title="eidOadd ? '新增' : '编辑'"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <el-form ref="addPerWarn" :rules="rules" label-width="70px" :model="addPerWarn" class="demo-dynamic">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="addPerWarn.name"></el-input>
                </el-form-item>
                <el-form-item label="预警类型" prop="EWID">
                  <el-checkbox-group v-model="addPerWarn.EWID">
                    <el-checkbox v-for="(item, index) in cities" :label="item.DID" :key="index">
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>

                <el-form-item label="描述" prop="describe">
                  <el-input v-model="addPerWarn.describe"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="submitForm('addPerWarn')">提交</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
        </el-card>
      </div>
    </div>
    <div class="tranWarns">
      <el-divider>
        <h3>通行预警类型</h3>
      </el-divider>
      <div class="tranWarns-content">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>类型名称</span>
          </div>
          <div class="text item">
            <el-table height="500px" :data="warnEvent" highlight-current-row style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div>
                    <div class="warn_transf" v-if="props.row.day">
                      <span>天数：</span>
                      <div class="warn_tranCont">
                        <el-input
                          v-if="props.row._id == showInp && showEidet == 'day'"
                          placeholder="请输入"
                          v-model="day"
                          clearable
                        ></el-input>
                        <span v-else>{{ props.row.day }}</span>
                      </div>
                      <span class="typeOpear">
                        <el-button
                          type="text"
                          icon="el-icon-check"
                          @click="checkTime(props.row)"
                          plain
                        ></el-button>
                        <el-button
                          type="text"
                          icon="el-icon-edit"
                          :disabled="!hasPerm('news:warnevent:edit')"
                          @click="eidtTime(props.row, props.$index, 'day')"
                          plain
                        ></el-button>
                      </span>
                    </div>
                    <div class="warn_transf" v-if="props.row.time">
                      <span>时间：</span>
                      <div class="warn_tranCont">
                        <el-time-select
                          v-if="props.row._id == showInp && showEidet == 'time'"
                          placeholder="起始时间"
                          v-model="startTime"
                          :picker-options="{
                            start: '00:00',
                            step: '00:60',
                            end: '24:00'
                          }"
                        ></el-time-select>
                        <el-time-select
                          v-if="props.row._id == showInp"
                          placeholder="结束时间"
                          v-model="endTime"
                          :picker-options="{
                            start: '00:00',
                            step: '00:60',
                            end: '24:00',
                            minTime: startTime
                          }"
                        ></el-time-select>
                        <span v-else>{{ props.row.time }}</span>
                      </div>
                      <span class="typeOpear">
                        <el-button
                          type="text"
                          icon="el-icon-check"
                          @click="checkTime(props.row)"
                          plain
                        ></el-button>
                        <el-button
                          type="text"
                          icon="el-icon-edit"
                          @click="eidtTime(props.row, props.$index, 'time')"
                          plain
                        ></el-button>
                      </span>
                    </div>
                    <div class="warn_transf" v-if="props.row.count">
                      <span>通行总数：</span>
                      <div class="warn_tranCont">
                        <el-input
                          v-if="props.row._id == showInp && showEidet == 'count'"
                          placeholder="请输入"
                          v-model="count"
                          clearable
                        ></el-input>
                        <span v-else>{{ props.row.count }}</span>
                      </div>
                      <span class="typeOpear">
                        <el-button
                          type="text"
                          icon="el-icon-check"
                          @click="checkTime(props.row)"
                          plain
                        ></el-button>
                        <el-button
                          type="text"
                          icon="el-icon-edit"
                          @click="eidtTime(props.row, props.$index, 'count')"
                          plain
                        ></el-button>
                      </span>
                    </div>
                    <div class="warn_transf" v-if="props.row.country">
                      <span>国家：</span>
                      <div class="warn_tranCont">
                        <el-select
                          v-if="props.row._id == showInp && showEidet == 'country'"
                          filterable
                          v-model="country"
                          multiple
                          collapse-tags
                          placeholder="请选择"
                          clearable
                        >
                          <el-option
                            v-for="(item, idx) in countries"
                            :key="idx"
                            :label="item.label"
                            :value="item.label"
                          >
                            <span style="float: left">{{ item.label }}</span>
                            <span
                              style="
                               margin-left: 20px
                                color: #8492a6;
                                font-size: 13px;
                              "
                            >
                              {{ item.value }}
                            </span>
                          </el-option>
                        </el-select>
                        <span v-else>{{ props.row.country }}</span>
                      </div>
                      <span class="typeOpear">
                        <el-button
                          type="text"
                          icon="el-icon-check"
                          @click="checkTime(props.row)"
                          plain
                        ></el-button>
                        <el-button
                          type="text"
                          icon="el-icon-edit"
                          @click="eidtTime(props.row, props.$index, 'country')"
                          plain
                        ></el-button>
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="名称" width="180"></el-table-column>
              <el-table-column prop="describe" label="说明"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { Row } from "element-ui";
export default {
  data() {
    return {
      eidOadd: true,
      checkedCities: [],
      cities: [],
      warnEvent: [],
      addPerWarn: { name: "", DTID: "", EWID: [], describe: "" },
      // 新增
      addWransType: "",
      rules: {
        name: [{ required: true, message: "必填项", trigger: "blur" }]
      },
      // 弹框
      dialogVisible: false,
      warnlist: [],
      typelist: [],
      expands: [],
      showexp: "",
      DID: {},
      // 判断显示
      showInp: "",
      // 时间段
      startTime: "",
      endTime: "",
      //国家
      countries: this.$store.state.app.countries || [],
      time: [],
      count: "",
      day: "",
      country: [],
      // 编辑显示
      showEidet: ""
    };
  },
  mounted() {
    this.getdict();
    this.getList();
  },
  methods: {
    getdict() {
      this.warnlist = JSON.parse(sessionStorage.getItem("dictData")).sys_early_warning;
      this.cities = this.warnlist;
    },
    getList() {
      var param = {
        where: { name: "", DTID: "97e223ef-e840-4b71-92e0-c6595385cb46" },
        page: "",
        limit: ""
      };
      this.$api.dict
        .initDict()
        .then((res) => {
          if (res.code == 0) {
            this.typelist = res.data.sys_person_sign;
          }
        })
        .catch((err) => {
          // this.$message.error({"服务器连接失败请重试"});
        });
      this.$api.warn.event_array().then((res) => {
        if (res.code == 0) {
          this.warnEvent = res.data;
          this.warnEvent.forEach((item) => {
            item.showInp = "";
          });
        }
      });
    },
    //删除
    handleDelete(row) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      }).then(() => {
        this.loading = true;
        let params = { _id: row._id, dbName: "business_dictionaries" };
        this.$api.wxNotic.remove_every(params).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.getList();
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      });
    },
    // 新增
    addWrans() {
      this.typelist.push({
        name: ""
      });
    },
    //新增人员类型
    addperType(row) {
      this.dialogVisible = true;
      this.eidOadd = true;
      this.addPerWarn = {
        name: "",
        DTID: row.DTID,
        EWID: [],
        describe: "",
        PDID: row.DID
      };
      // cityOptions.push("新增人员类型");
    },
    // 编辑
    eidType(row) {
      this.addPerWarn = Object.assign({}, row);
      if (this.eidOadd) {
        this.eidOadd = false;
      }
      this.dialogVisible = true;
    },
    // 删除

    deleType(row) {
      // 点击删除按钮 弹出删除框
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 点击弹出框确认按钮触发事件
          // 处理传递给后台的数据  JSON.stringify 把 row 对象 转换为json 字符串
          var params = JSON.stringify(row);
          // 调用接口 传递 params 参数
          this.$api.warn.dictionaries_remove(params).then((res) => {
            // 接口调用成功返回 res
            if (res.code == 0) {
              // code 为0删除成功
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              // 调用getlist 刷新列表
              this.getList();
            } else {
              this.$message({
                type: "info",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          // 点击弹出框取消按钮触发事件
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //删除

    // 提交
    establish(row) {
      this.$confirm("确定提交？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var param = Object.assign({}, row);
        param.DTID = "97e223ef-e840-4b71-92e0-c6595385cb46";
        var params = JSON.stringify(param);
        this.$api.warn.dictionaries_add(params).then((res) => {
          if (res.code == 0) {
            this.getList();
          }
        });
      });
    },
    // 查看
    handleClick(option) {},
    edithandle(option) {},
    // 选择

    handleClose(done) {
      this.dialogVisible = false;
    },
    // 表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var params = JSON.stringify(this.addPerWarn);
          this.$api.warn.dictionaries_add(params).then((res) => {
            if (res.code == 0) {
              this.dialogVisible = false;
              this.getList();
            }
          });
          //  this.addPerWarn
          // this.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    //通行编辑
    eidtTime(row, index, keys) {
      if (!this.showInp) {
        this.showInp = row._id;
      } else {
        this.showInp = "";
        this.showEidet = "";
      }
      switch (keys) {
        case "day":
          this.showEidet = "day";
          break;
        case "time":
          this.showEidet = "time";
          break;
        case "count":
          this.showEidet = "count";
          break;
        case "country":
          this.showEidet = "country";
          break;
        default:
          break;
      }
      console.log("点击的山", keys, "lop", this.showEidet);
    },
    //通行预警
    checkTime(row) {
      var params = Object.assign({}, row);
      if (params.time & this.time) {
        params.time.push(this.startTime, this.endTime);
      }
      if (params.count && this.count) {
        params.count = this.count;
      }
      if (params.day && this.day) {
        params.day = this.day;
      }
      if (params.country && this.country) {
        params.country = this.country.toString();
      }
      this.$api.warn.dictionaries_add(params).then((res) => {
        if (res.code == 0) {
          this.showInp = "";
          this.getList();
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.warns {
  background: #ffffff;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.tranWarns,
.perWarns {
  height: 100%;
  width: 50%;
  box-sizing: border-box;
  padding: 20px;
}
.tranWarns-content,
.perWarns-content {
  height: 95%;
  box-sizing: border-box;
  padding: 10px;
}
// 卡片
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  height: 100%;
  // background: sandybrown;
}
// .el-table__body-wrapper{
//   overflow-y: auto;

// }
.addperWarn {
  height: 32px;
}
.el-input {
  width: 70%;
}
.expandsOne,
.warn_transf {
  padding: 10px 0;
  margin: 3px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.typeTitle {
  font-weight: bold;
}
.typeName {
  display: inline-block;
  width: 100px;
}
.typeOpear {
  width: 80px;
  margin-left: 20px;
}
.tablebox {
  height: 500px;
  // height: 200px;
}
.warn_transf {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.warn_tranCont {
  width: 50%;
}
</style>
